<template>
  <div>
    <div>
      <el-row :gutter="20" type="flex" justify="space-around" class="al-flex-wrap">
        <el-col v-for="(item, index) in newestAppointment" :span="8" class="al-m-top-10px" :key="index">
          <div class="al-cursor-pointer al-hover-shadow-radius"
               @click="goPage('/appointment/detail/' + item.id)">
            <div class="al-box-shadow-radius al-overflow-hide">
              <ALImage :src="item.image"
                       style="height: 200px"
                       fit="cover" />
              <div class="al-flex-container-center-h">
                {{item.title}}
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import ALImage from "../../../components/public/ALImage";
  import {request} from "../../../util/network/request";
  import {APPOINTMENT_GET_NEWEST} from "../../../util/network/api/appointment/api-appointment";
  export default {
    name: "NewestAppointmentComponent",
    //组件
    components: {ALImage},

    //属性
    props: {},

    //数据
    data() {
      return {
        newestAppointment: {}
      }
    },

    //挂载完成时
    mounted() {
      this.getNewestAppointment();
    },

    //方法
    methods: {
      goPage: function (path) {
        this.gotoPage(path);
      },

      getNewestAppointment() {
        request({
          url: APPOINTMENT_GET_NEWEST
        }).then(res => {
          // console.log(res);
          this.newestAppointment = res.data.data;
        }).catch(err => {
          console.log(err)
        });
      },
    },

    //计算属性
    computed: {},

    //监听
    watch: {}
  }
</script>

<style scoped>

</style>
